// data-set 可以按需引入，除此之外不要引入别的包
import React from 'react';
import { Chart, Axis, Geom, Tooltip, Guide } from 'bizgoblin';

const Echart = ({data, defs}) => {
  // 下面的代码会被作为 cdn script 注入 注释勿删
  // CDN START
  const pixelRatio = window.devicePixelRatio * 2;

  function onShowTooltip(ev) {
    const items = ev.items;
    items[0].name = null;
    items[0].name = items[0].title;
    items[0].value = `¥ ${items[0].value}`;
  }

  return (
    <Chart width="100%" data={data} defs={defs} animate={{ type: 'scaley' }} pixelRatio={pixelRatio} padding={[ 20, 0, 20, 60]}>
      <Axis dataKey="mon" />
      <Axis dataKey="cnt" label={{textStyle:{ fontSize: 8 }}} />
      <Tooltip showItemMarker={false} onShow={onShowTooltip} />
      <Geom geom="interval" position="mon*cnt" />
    </Chart>
  );
}

export default Echart;